<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:include="common/common::header">
    <title>员工管理</title>
</head>
<body>

<!--导航栏-->
<div class="x-nav">
              <span class="layui-breadcrumb">
                <a href="">首页</a>
                <a href="">系统管理</a>
                <a><cite>员工管理</cite></a>
              </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>

<!-----查询条件---->
<blockquote shiro:hasPermission="employee_list"  class="layui-elem-quote news_search">
    <form class="layui-form" method="post" action="">
        <div class="layui-inline">
            <label class="layui-form-label">登录名：</label>
            <div class="layui-input-inline">
                <input type="text" value="" placeholder="请输入登录名" id="empLoginname"
                       class="layui-input search_input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-inline">
                <input type="text" value="" placeholder="请输入用户姓名" id="empName"
                       class="layui-input search_input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-inline">
                <select id="empSex">
                    <option value="">请选择</option>
                    <option value="0">女</option>
                    <option value="1">男</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">账号状态：</label>
            <div class="layui-input-inline">
                <select id="status">
                    <option value="">请选择</option>
                    <option value="0">已启用</option>
                    <option value="1">未启用</option>
                </select>
            </div>
        </div>
        <div class="layui-input-inline">
            <a class="layui-btn search_btn" onclick="reloding()">查询</a>
        </div>
    </form>
</blockquote>

<!-- 数据表格 -->
<table shiro:hasPermission="employee_list" id="employee" lay-filter="empFilter"></table>

<!--行工具栏 DOM-->
<script type="text/html" id="empBar">
    {{# if(d.isAdmin==0){ }}
    {{#  if(d.status==0){ }}
    <a shiro:hasPermission="employee_startstop" class="layui-btn layui-bg-blue layui-btn-xs" lay-event="empState">停用</a>
    {{#  } else { }}
    <a shiro:hasPermission="employee_startstop" class="layui-btn layui-bg-blue layui-btn-xs" lay-event="empState">启用</a>
    {{#  } }}
    <a shiro:hasPermission="employee_update" class="layui-btn layui-btn-xs" lay-event="empEdit">编辑</a>
    <a shiro:hasPermission="employee_delete" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="empDel">删除</a>
    {{#  } else { }}
    <label class="layui-form-label">超级管理员</label>
    {{#  } }}
</script>

<!--恢复窗口行工具栏 DOM-->
<script type="text/html" id="delEmpBar">
    <a shiro:hasPermission="employee_recover_recover" class="layui-btn layui-bg-blue layui-btn-xs" lay-event="recover">恢复</a>
    <a shiro:hasPermission="employee_recover_delete" class="layui-btn layui-btn-danger layui-btn-xs" lay-event="remove">删除</a>
</script>

<!--恢复DOM-->
<div id="recoverDom" style="display: none;">
    <!-- 数据表格 -->
    <table id="delEmployee" lay-filter="delEmpFilter"></table>
</div>

<!--添加用户DOM-->
<div id="empDom" style="display: none;">
    <div class="layui-form-item">
        <div class="layui-input-inline" style="width:170px;">
        </div>
    </div>
    <form id="addEmployee" method="post" class="layui-form" action="/dangxia/employee/addEmployee">
        <div class="layui-form-item">
            <label class="layui-form-label">登录名<span class="x-red">*</span>:</label>
            <div class="layui-input-inline" style="width:170px;">
                <input id="addEmpLoginname" type="text" name="empLoginname" lay-verify="required|strSize"
                       style="width: 160px;" placeholder="唯一的登入名"
                       autocomplete="off"
                       class="layui-input">
                <span id="tip" style="color: red;"></span>
            </div>
            <label class="layui-form-label" style="width: 70px;">电子邮箱<span class="x-red"></span>:</label>
            <div class="layui-input-inline">
                <input type="text" style="width: 160px;" name="empEmail" placeholder="可以为空" lay-verify="myEmail"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工姓名<span class="x-red">*</span>:</label>
            <div class="layui-input-inline" style="width:170px;">
                <input type="text" name="empName" lay-verify="required" style="width: 160px;" placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 70px;">密码<span class="x-red">*</span>:</label>
            <div class="layui-input-inline">
                <input id="psw1" type="password" name="empPassword" style="width: 160px;" required
                       lay-verify="required|strSize"
                       placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别<span class="x-red">*</span>:</label>
            <div class="layui-input-inline" style="width:170px;">
                <input type="radio" name="empSex" value="1" title="男" checked="">
                <input type="radio" id="updSex" name="empSex" value="0" title="女">
            </div>
            <label class="layui-form-label" style="width: 70px;">确认密码<span class="x-red">*</span>:</label>
            <div class="layui-input-inline">
                <input id="psw2" type="password" required lay-verify="required|strSize" style="width: 160px;"
                       placeholder="再次输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机号<span class="x-red">*</span>:</label>
                <div class="layui-input-inline">
                    <input type="tel" name="empPhone" style="width: 160px;" placeholder="手机号码"
                           lay-verify="required|phone" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色:</label>
            <div id="roleList" class="layui-input-block">

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

</div>

<!--修改用户DOM-->
<div id="updemp" style="display: none;">

    <form id="updateEmployee" autocomplete="off" class="layui-form" action="/dangxia/employee/updateEmployee">
        <div class="layui-form-item">
            <div class="layui-input-inline" style="width:170px;">
                <input type="hidden" name="id" id="updId" value=""/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录名<span class="x-red">*</span>:</label>
            <div class="layui-input-inline" style="width:170px;">
                <input id="updLoginname" type="text" name="empLoginname" disabled lay-verify="required|strSize"
                       style="width: 160px;" placeholder="唯一的登入名"
                       autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 70px;">电子邮箱<span class="x-red"></span>:</label>
            <div class="layui-input-inline">
                <input id="updEmail" type="text" style="width: 160px;" name="empEmail" placeholder="没有为空"
                       lay-verify="myEmail" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">员工姓名<span class="x-red">*</span>:</label>
            <div class="layui-input-inline" style="width:170px;">
                <input id="updName" type="text" name="empName" lay-verify="required" style="width: 160px;"
                       placeholder="请输入"
                       autocomplete="off"
                       class="layui-input">
            </div>
            <label class="layui-form-label" style="width: 70px;">修改密码<span class="x-red">*</span>:</label>
            <div class="layui-input-inline">
                <input id="updEmp1" type="password" name="empPassword" style="width: 160px;"
                       lay-verify="updSize" placeholder="输入即为更改" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别<span class="x-red">*</span>:</label>
            <div class="layui-input-inline" style="width:170px;">
                <input type="radio" id="updnSex" name="empSex" value="1" title="男" checked>
                <input type="radio" id="updvSex" name="empSex" value="0" title="女">
            </div>
            <label class="layui-form-label" style="width: 70px;">确认密码<span class="x-red">*</span>:</label>
            <div class="layui-input-inline">
                <input id="updEmp2" type="password" lay-verify="updSize" style="width: 160px;"
                       placeholder="再次输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">手机号<span class="x-red">*</span>:</label>
                <div class="layui-input-inline">
                    <input id="updPhone" type="tel" name="empPhone" style="width: 160px;" placeholder="手机号码"
                           lay-verify="required|phone" autocomplete="off"
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">角色:</label>
            <div id="updList" class="layui-input-block">

            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="update">提交修改</button>
            </div>
        </div>
    </form>

</div>

<!--页面主体-->
</body>

<!--头部工具栏-->
<script type="text/html" id="employeeTool">
    <button shiro:hasPermission="employee_add" class="layui-btn" lay-event="showAddEmp"><i
            class="layui-icon layui-icon-add-1"></i>添加员工
    </button>
    <button shiro:hasPermission="employee_delete" class="layui-btn layui-btn-danger" lay-event="multiDelete"><i
            class="layui-icon layui-icon-delete"></i>批量删除
    </button>
    <button shiro:hasPermission="employee_recover" class="layui-btn" lay-event="showRecover" style="margin-left: 76%"><i
            class="layui-icon layui-icon-add-1"></i>恢复
    </button>
</script>

<!--javascrupt 开始-->
<script type="text/javascript" th:inline="none">

    /*刷新主表格*/
    function reloding() {
        layui.use('table', function () {
            var table = layui.table;
            table.reload('employee', {
                height: 'full-150',
                //url: '/dangxia/employee/getEmployeeAll',
                method: 'post',
                where: {
                    empLoginname: $("#empLoginname").val(),
                    empName: $("#empName").val(),
                    empSex: $("#empSex").val(),
                    status: $("#status").val()
                }
            });
        });
    }

    /*刷新恢复表格*/
    function delEmpReloding() {
        layui.use('table', function () {
            var table = layui.table;
            table.reload('delEmployee', {
                height: 'full-150',
                where: {isDelete: 1},
                url: '/dangxia/employee/getEmployeeAll',
                method: 'post'
            });
        });
    }

    //表单是否提交
    var isSubmit = false;
    //登录名唯一校验
    $("#addEmpLoginname").blur(function () {
        //同步ajax
        $.ajax({
            url: "/dangxia/employee/isExistLoginName",
            type: "post",
            cache: false,
            async: false,
            dataType: "json",
            data: {empLoginname: $("#addEmpLoginname").val()},
            success: function (data) {
                if (data.code == 0) {
                    $("#tip").html("登录名已存在");
                    layer.msg("登录名已存在");
                    isSubmit = false;
                } else {
                    $("#tip").html("");
                    isSubmit = true;
                }
            }
        });
        //异步请求
        /*$.post("/dangxia/employee/isExistLoginName", {
            empLoginname: $("#addEmpLoginname").val()
        }, function (data) {
            if (data.code == 0) {
                $("#tip").html("登录名已存在");
                layer.msg("登录名已存在");
                isSubmit = false;
            } else {
                $("#tip").html("");
                isSubmit = true;
            }
        });*/
    });

    /*数据表格*/
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;

        //自定义表单验证规则
        form.verify({
            myEmail: [/^\s*$|^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, "邮箱格式不正确"],
            strSize: [/^[\S]{4,15}$/, "长度为4-15"],
            updSize: [/^\s*$|^[\S]{4,15}$/, "长度为4-15"]
        });

        //第一个实例
        table.render({
            elem: '#employee'
            , height: 'full-150'
            , toolbar: '#employeeTool'
            ,skin: 'row' //设置皮肤
            , even: true    //偶数行
            , defaultToolbar: []  //默认工具
            ,autoSort: false //禁用前端自动排序。
            , url: '/dangxia/employee/getEmployeeAll' //数据接口
            , page: true //开启分页
            , limits: [10, 20, 30]
            , limit: 10
            , cols: [[ //表头
                {field: 'left', type: 'checkbox'}
                , {field: 'id', title: 'ID',sort: true}
                , {field: 'empLoginname', title: '账号'}
                , {field: 'empName', title: '员工名'}
                , {
                    field: 'empSex', title: '性别',
                    templet: function (sex) {
                        if (sex.empSex == 0) {
                            return '女';
                        } else {
                            return '男';
                        }
                    }
                }
                , {field: 'empPhone', title: '电话'}
                , {field: 'empEmail', title: '邮箱'}
                , {
                    field: 'status', title: '状态',
                    templet: function (sta) {
                        if (sta.status == 0) {
                            return "<span style='height:28px;line-height: 28px' class='layui-btn layui-btn-normal layui-btn-mini'>已启用</span>"
                        } else {
                            return "<span style='height:28px; line-height: 28px' class='layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled'>未启用</span>"
                        }
                    }
                }
                //, {field: 'empLastTime', title: '上次登录时间'}
                , {field: 'cratetime', title: '创建日期',sort: true}
                , {field: 'right', title: '操作', toolbar: '#empBar'}
            ]]
        });

        /*监听行工具事件*/
        table.on('tool(empFilter)', function (obj) {
            /*行工具条分流*/
            switch (obj.event) {
                /*监听停用启用按钮*/
                case "empState":
                    //定义状态
                    var statu = 0;
                    if (obj.data.status == 0) {
                        statu = 1;
                    }
                    //发送请求
                    $.post("/dangxia/employee/updateEmployeeStatus", {
                        id: obj.data.id,
                        status: statu
                    }, function (data) {
                        if (data.code == 0) {
                            /*刷新*/
                            reloding();
                        }
                    })
                    break;
                /*监听编辑按钮*/
                case "empEdit":
                    //打开修改页面
                    var edit = layer.open({
                        type: 1,
                        title: "修改用户",
                        area: ['600px', '500px'],
                        content: $('#updemp')
                    });
                    //打开之后先重置表单
                    $("#updateEmployee")[0].reset();
                    layui.form.render();
                    //给表单赋默认值
                    $("#updId").val(obj.data.id);
                    $("#updLoginname").val(obj.data.empLoginname);
                    $("#updEmail").val(obj.data.empEmail);
                    $("#updName").val(obj.data.empName);
                    $("#updPhone").val(obj.data.empPhone);
                    // $("#updEmp1").val(obj.data.empPassword);
                    //选中默认的性别
                    if (obj.data.empSex == 0) {
                        $("#updvSex").prop("checked", "checked");
                        $("#updnSex").prop("checked", "");
                    } else {
                        $("#updvSex").prop("checked", "");
                        $("#updnSex").prop("checked", "checked");
                    }
                    //解决 -----当checkbox一个都没选中时默认不发送对应字段的参数报错的问题
                    $("#updList").html("<input type='hidden' name='roles' value='0'>");
                    //获得所有的角色
                    $.post("/dangxia/role/getRoleAll", {
                        page: "",
                        limit: "",
                        "status": "0"
                    }, function (roles) {
                        if (roles.data.length == 0) {
                            $("#updList").html("无");
                        }
                        for (var i = 0; i < roles.data.length; i++) {
                            var str = "<input type='checkbox' lay-skin='primary' lay-filter='ul' id='u" + roles.data[i].id + "'name='roles' value='" + roles.data[i].id + "' title='" + roles.data[i].roleName + "'/>"
                            $("#updList").append(str);
                        }
                        // 得到已拥有的角色
                        $.post("/dangxia/employee/getHaveRole", {
                            id: obj.data.id
                        }, function (data) {
                            for (var i = 0; i < data.data.length; i++) {
                                //选中已拥有角色
                                $('#u' + data.data[i].roleId).prop("checked", "true");
                            }
                            /*重新渲染页面*/
                            form.render('checkbox');
                            form.render('radio');
                        })
                    });
                    break;

                /*监听删除按钮*/
                case "empDel":
                    //打开提示窗口
                    var dialog = layer.confirm('真的删除行么', function (index) {
                        //将id放到数组中
                        var delId = [obj.data.id];
                        //发送请求
                        $.post("/dangxia/employee/updateEmployeeIsDelete", {
                            ids: delId,
                            isDelete: 1
                        }, function (data) {
                            if (data.code == 0) {
                                /*刷新*/
                                reloding();
                                layer.close(dialog);
                            }
                        });
                    });
                    break;
            }
        });

        /*头部工具栏事件监听*/
        table.on('toolbar(empFilter)', function (obj) {
            switch (obj.event) {
                /*显示添加面板*/
                case 'showAddEmp':
                    layer.open({
                        type: 1,
                        title: "添加员工",
                        area: ['600px', '500px'],
                        content: $('#empDom')
                    });
                    layer.ready(function () {
                        /*打开之后先清空表单*/
                        $("#addEmployee")[0].reset();
                        layui.form.render();
                        $("#roleList").html("<input type='hidden' name='roles' value='0'>");
                        /*接口事先定义 所以必须传值*/
                        $.post("/dangxia/role/getRoleAll", {
                            "page": "",
                            "limit": "",
                            "status": "0"
                        }, function (roles) {
                            if (roles.data.length == 0) {
                                $("#roleList").html("无");
                            }
                            for (var i = 0; i < roles.data.length; i++) {
                                var str = "<input type='checkbox' lay-skin='primary' lay-filter='rl' id='r" + roles.data[i].id + "'name='roles' value='" + roles.data[i].id + "' title='" + roles.data[i].roleName + "'/>"
                                $("#roleList").append(str);
                            }
                            /*重新渲染页面*/
                            form.render('checkbox');
                        });
                    });
                    break;
                /*批量删除*/
                case 'multiDelete':
                    var delId = [];
                    /*遍历选中行*/
                    var checkStatus = table.checkStatus('employee');
                    if (checkStatus.data.length == 0) {
                        layer.msg('至少选择一行');
                        return;
                    }
                    var dialog = layer.confirm('真的删除行么', function (index) {
                        for (var i = 0; i < checkStatus.data.length; i++) {
                            /*将批量删除的id存入数组*/
                            if (checkStatus.data[i].isAdmin==1){
                                layer.msg("无法删除超管");
                                continue;
                            }
                            delId.push(checkStatus.data[i].id);
                        }
                        //重新加载
                        if (delId.length==0){
                            reloding();
                            layer.close(dialog);
                            return;
                        }
                        console.log(delId);
                        /*提交批量删除请求*/
                        $.post("/dangxia/employee/updateEmployeeIsDelete", {
                            ids: delId,
                            isDelete: 1
                        }, function (data) {
                            if (data.code == 0) {
                                /*刷新*/
                                layer.msg('已删除');
                                reloding();
                                layer.close(dialog);
                            }
                        })
                    });
                    break;

                /*恢复*/
                case "showRecover":

                    /*打开恢复弹出层*/
                    layer.open({
                        type: 1,
                        title: "恢复用户",
                        area: ['800px', '600px'],
                        content: $('#recoverDom')
                    });

                    //第二个实例
                    table.render({
                        elem: '#delEmployee'
                        , height: 'full-150'
                        , defaultToolbar: []  //默认工具
                        ,skin: 'row' //设置皮肤
                        , even: true    //偶数行
                        , url: '/dangxia/employee/getEmployeeAll' //数据接口
                        , where: {isDelete: 1}
                        , page: true //开启分页
                        , limits: [10, 20, 30]
                        , limit: 10
                        , cols: [[ //表头
                            {field: 'empLoginname', title: '账号'}
                            , {field: 'empName', title: '员工名'}
                            , {
                                field: 'empSex', title: '性别',
                                templet: function (sex) {
                                    if (sex.empSex == 0) {
                                        return '女';
                                    } else {
                                        return '男';
                                    }
                                }
                            }
                            , {field: 'empPhone', title: '电话'}
                            , {field: 'empEmail', title: '邮箱'}
                            , {field: 'cratetime', title: '创建日期'}
                            , {field: 'right', title: '操作', toolbar: '#delEmpBar'}
                        ]]
                    });

                    /*监听行工具事件*/
                    table.on('tool(delEmpFilter)', function (obj) {
                        /*行工具条分流*/
                        switch (obj.event) {
                            /*监听恢复按钮*/
                            case "recover":
                                //将id放到数组中
                                var delId = [obj.data.id];
                                //发送请求
                                $.post("/dangxia/employee/updateEmployeeIsDelete", {
                                    ids: delId,
                                    isDelete: 0
                                }, function (data) {
                                    if (data.code == 0) {
                                        /*刷新*/
                                        delEmpReloding();
                                        //layer.close(dialog);
                                    }

                                });
                                //延迟刷新
                                var s = setTimeout(reloding(),3000);


                                break;
                            /*监听删除按钮*/
                            case "remove":
                                //打开提示窗口
                                var dialog = layer.confirm('删除后将无法恢复！', function (index) {
                                    //将id放到数组中
                                    var delId = [obj.data.id];
                                    //发送请求
                                    $.post("/dangxia/employee/deleteEmployeeById", {
                                        ids: delId
                                    }, function (data) {
                                        if (data.code == 0) {
                                            /*刷新*/
                                            delEmpReloding();
                                            //reloding();
                                            //layer.close(dialog);
                                        }
                                    });
                                });
                                break;
                        }
                    });
                    break;
            }
            ;
        });
        //定义表单是否提交
        //防止网速慢 重复提交表单
        var formLock = true;
        /*监听添加员工提交*/
        form.on('submit(submit)', function (data) {
            //比较两次密码
            if ($("#psw2").val() != $("#psw1").val()) {
                layer.msg("两次密码不一致");
                return false;
            }
            //表单是否提交
            if (formLock != true){
                return false;
            }

            //修改提交状态
            formLock = false;

            //用户名唯一校验时回改变isSubmit 的值
            //不为真 不提交
            if (!isSubmit) {
                layer.msg("登录名已存在");
                return false
            }

            //提交表单
            $("#addEmployee").ajaxForm(function (data) {
                if (data.code == 0) {
                    //修改提交状态
                    formLock = true;
                    layer.msg("添加成功");
                    $("#addEmployee")[0].reset();
                    reloding();
                    layui.form.render();
                    layer.closeAll();
                }
            });
        });

        /*监听修改员工提交*/
        form.on('submit(update)', function (data) {
            //比较两次密码
            if ($("#updEmp2").val() != $("#updEmp1").val()) {
                layer.msg("两次密码不一致");
                return false;
            }
            //提交数据表单
            $("#updateEmployee").ajaxForm(function (data) {
                if (data.code == 0) {
                    layer.msg("修改成功");
                    $("#updateEmployee")[0].reset();
                    reloding();
                    layui.form.render();
                    layer.closeAll();
                }
            })
        });

        //监听排序事件
        table.on('sort(empFilter)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('employee', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                ,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    ,order: obj.type //排序方式
                }
            });
        });
    });
</script>
</html>